<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 Documentation</title>
<link rel="stylesheet" href="../Style.css" type="text/css" />
</head>

<body topMargin='10' leftMargin='10'>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><span class="pageHeader">Font Style Type Parameters</span></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><span class="text">As you already know, using the<span class="codeInline"> 
      font </span>style type, you can control the visual properties of all the 
      text on the chart. The following properties are extended by the<span class="codeInline"> 
      font</span> type. Detailed explanations with code samples follow:</span></td>
  </tr>
  <tr> 
    <td><p class="text">&nbsp;</p></td>
  </tr>
  <tr> 
    <td><table border="1" cellpadding="3" cellspacing="0" bordercolor="f1f1f1">
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="text"><p><strong>Attribute</strong></p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p><strong>Brief 
              Description</strong></p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>Sample 
              or Valid values</strong></p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>font</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>Sets 
              the font family for the text.</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p>Verdana, 
              Arial .. </p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>size</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>Specifies 
              the font size</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p>10, 
              12 .. </p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>Color</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>Sets 
              the font color, should be hex color code without #</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p>FF0000, 
              FFFFDD </p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>Bold</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>Flag 
              indicating whether font should be bold or not</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>1</strong> 
              for Yes, <strong>0</strong> for No</p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>Italic</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>Flag 
              indicating whether font should be italics or not</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>1</strong> 
              for Yes, <strong>0</strong> for No</p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>Underline</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>Flag 
              indicating whether font should be underlined</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>1</strong> 
              for Yes, <strong>0</strong> for No</p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>bgColor</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>Sets 
              the background color for a text box, should be hex color code without 
              #</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p>FF0000, 
              FFFFDD </p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>borderColor</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>If 
              you need a border around your text, you can use this parameter</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p>&nbsp;</p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>isHTML</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>Helps 
              you set whether the text should be rendered as HTML or plain text.</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p>&nbsp;</p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>leftMargin</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>The 
              left margin of the text, in points</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p>&nbsp;</p></td>
        </tr>
        <tr> 
          <td width="79" valign="top" bordercolor="f1f1f1" class="codeInline"><p>letterSpacing</p></td>
          <td width="506" valign="top" bordercolor="f1f1f1" class="text"><p>The 
              amount of space that is uniformly distributed between characters 
              of the text</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p>&nbsp;</p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><span class="textBold"><span class="codeInline"><strong>Font family</strong></span><strong>, 
        <span class="codeInline">size</span> &amp;<span class="codeInline"> color</span></strong></span></td>
  </tr>
  <tr> 
    <td><span class="text">The basic attributes of the font are its</span><span class="codeInline"> 
      font family, size and color</span><span class="text"> which can be set using 
      the aforementioned attributes. <br />
      e.g.,<br />
      <span class="codeInline">&lt;style name='MyFirstFontStyle' type='font' font='Verdana' 
      size='12' color='FF0000' /&gt; </span></span></td>
  </tr>
  <tr> 
    <td><p class="text">&nbsp;</p></td>
  </tr>
  <tr> 
    <td><table border="1" cellpadding="3" cellspacing="0" bordercolor="f1f1f1">
        <tr> 
          <td width="293" valign="top" class="text"><p><strong>Attribute</strong></p></td>
          <td width="293" valign="top" class="text"><p><strong>Format</strong></p></td>
          <td width="293" valign="top" class="text"><p><strong>Example</strong></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top" class="codeInline"><p>Font</p></td>
          <td width="293" valign="top" class="codeInline"><p>font=<span class="codeInline">'fontfamily' 
              </span></p></td>
          <td width="293" valign="top" class="codeInline"><p>font=<span class="codeInline">'Verdana' 
              </span></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top" class="codeInline"><p>Size</p></td>
          <td width="293" valign="top" class="codeInline"><p>size=<span class="codeInline">'fontsize' 
              </span></p></td>
          <td width="293" valign="top" class="codeInline"><p>size=<span class="codeInline">'12' 
              </span></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top" class="codeInline"><p>Color</p></td>
          <td width="293" valign="top" class="codeInline"><p>color=<span class="codeInline">'HexCode 
              (without #)'</span></p></td>
          <td width="293" valign="top" class="codeInline"><p>color=<span class="codeInline">'FF0000'</span></p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><p class="text">Here,<span class="codeInline"> font</span> should refer 
        to a font family which is present on the end users system (else the default 
        system font would be used to draw text). Color should be in <span class="codeInline">Hex 
        code</span> without any<span class="codeInline"> #.</span></p></td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><span class="textBold"><span class="codeInline">bold</span>, <span class="codeInline">italic</span> 
        &amp; <span class="codeInline">underline</span></span></td>
  </tr>
  <tr> 
    <td><span class="text">To decorate your text, you can use any of the above 
      parameters as under:<br />
      <span class="codeInline">&lt;style name='MyFirstFontStyle' type='font' font='Verdana' 
      size='12' color='FF0000' <strong>bold='1' italic='1' underline='1'</strong> 
      /&gt;</span></span></td>
  </tr>
  <tr> 
    <td><p class="text">&nbsp;</p></td>
  </tr>
  <tr> 
    <td><table border="1" cellpadding="3" cellspacing="0" bordercolor="f1f1f1">
        <tr> 
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>Attribute</strong></p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>Format</strong></p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>Example</strong></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>Bold</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>bold=<span class="codeInline">'Logicalvalue' 
              </span></p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>bold=<span class="codeInline">'1'</span> 
              or bold=<span class="codeInline">'0' </span></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>Italic</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>italic=<span class="codeInline">'Logicalvalue' 
              </span></p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>italic=<span class="codeInline">'1'</span> 
              italic=<span class="codeInline">'0' </span></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>Underline</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>underline=<span class="codeInline">'Logicalvalue' 
              </span></p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>underline=<span class="codeInline">'1'</span> 
              or underline=<span class="codeInline">'0'</span></p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td><p class="text">The above code will make sure that your font appears as 
        <span class="codeInline">bold, italicized and underlined.</span></p></td>
  </tr>
  <tr> 
    <td class="textBold">&nbsp;</td>
  </tr>
  <tr> 
    <td class="textBold"><span class="textBold"> <span class="codeInline">bgColor</span> 
      and <span class="codeInline">borderColor <span> </span></td>
  </tr>
  <tr> 
    <td><span class="text">If you intend to put a </span><span class="codeInline">border 
      color </span><span class="text">or a</span><span class="codeInline"> background 
      color</span><span class="text"> for your text boxes on the chart, you can 
      use the above two parameter to define hex color code (without <span class="codeInline">#)</span> 
      as under:<br />
      <span class="codeInline">&lt;style name='MyFirstFontStyle' type='font' font='Verdana' 
      size='12' color='FF0000' <strong>bgColor='FFFFDD' borderColor='666666'</strong> 
      /&gt;</span></span></td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><table border="1" cellpadding="3" cellspacing="0" bordercolor="f1f1f1">
        <tr> 
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>Attribute</strong></p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>Format</strong></p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="text"><p><strong>Example</strong></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>bgColor</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>bgColor='value' 
            </p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>bgColor='FFFFDD' 
            </p></td>
        </tr>
        <tr> 
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>borderColor</p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>borderColor='value 
              ' </p></td>
          <td width="293" valign="top" bordercolor="f1f1f1" class="codeInline"><p>borderColor='666666' 
            </p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td><span class="text">This style when applied to a text field on chart (e.g., 
      caption), would give an output as under:</span></td>
  </tr>
  <tr> 
    <td class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td><table width="95%" border="0" cellspacing="0" cellpadding="2">
        <tr> 
          <td><img src="Images/Styles/style_1.gif" width="225" height="68" class="imageBorder" /></td>
        </tr>
      </table>
      <table width="95%" border="0" cellspacing="0" cellpadding="2">
        <tr> 
          <td><p class="imageCaption">Chart caption ("Products Per Category") 
              with border and background color applied to it.</p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><span class="codeInline">isHTML</span></td>
  </tr>
  <tr> 
    <td><p class="text">This attribute is particularly useful, when you have <span class="codeInline">HTML</span> 
        characters as a part of your text e.g., <span class="codeInline">"&lt; 
        5" or "&gt; 5" </span>etc. By default, FusionCharts renders all text as 
        <span class="codeInline">HTML</span> and as such <span class="codeInline">"&lt; 
        5"</span> will be treated as a non-closing <span class="codeInline">HTML</span> 
        tag and wouldn't be displayed at all.</p></td>
  </tr>
  <tr> 
    <td class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td class="text"><p>For example, if you've to display<span class="codeInline"> 
        "&lt; 5"</span> for a particular set value, you would use:<br />
        <span class="codeInline">&lt;set name='&amp;lt; 5' value='7' /&gt;</span><br />
        (Note that <span class="codeInline">&amp;lt</span>; is the encoded form 
        of <span class="codeInline">&lt;, </span>which is used in <span class="codeInline">XML 
        </span>data documents).</p></td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><span class="text">And the style type for this chart element which contains 
      the text would be defined as:<br />
      <span class="codeInline">&lt;style name='LabelFont' type='font' font='Arial' 
      size='10' <strong>isHTML='0' </strong>/&gt;</span></span></td>
  </tr>
  <tr> 
    <td><p class="text">&nbsp;</p></td>
  </tr>
  <tr> 
    <td class="text"><table border="1" cellpadding="3" cellspacing="0" bordercolor="f1f1f1">
        <tr> 
          <td width="293" valign="top" class="text"><p><strong>Attribute</strong></p></td>
          <td width="293" valign="top" class="text"><p><strong>Format</strong></p></td>
          <td width="293" valign="top" class="text"><p><strong>Example</strong></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top" class="text"><p class="codeInline">isHTML</p></td>
          <td width="293" valign="top" class="text"><p class="codeInline">isHTML 
              ='Logicalvalue' </p></td>
          <td width="293" valign="top" class="text"><p class="codeInline">isHTML 
              ='1' or isHTML ='0' </p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td class="text"><span class="textBold"><span class="codeInline">leftMargin 
        </span>and<span class="codeInline"> letterSpacing</span></span></td>
  </tr>
  <tr> 
    <td class="text"><p><span class="codeInline">leftMargin </span>lets you set 
        the left margin of the text (in points) and<span class="codeInline"> letterSpacing 
        </span>allows you to control the space that is uniformly distributed between 
        characters - the value specifies the number of pixels that are added to 
        the space after each character. A negative value condenses the space between 
        characters. </p></td>
  </tr>
  <tr> 
    <td class="text">e.g., <br /> <span class="codeInline">&lt;style name='MyFirstFontStyle' 
      type='font' font='Verdana' size='12' color='FF0000' bgColor='FFFFDD' borderColor='666666' 
      <strong>leftMargin='10' letterSpacing='3'</strong>/&gt;</span></td>
  </tr>
  <tr> 
    <td class="text"><p class="text">&nbsp;</p></td>
  </tr>
  <tr> 
    <td class="text"><table border="1" cellpadding="3" cellspacing="0" bordercolor="f1f1f1">
        <tr> 
          <td width="293" valign="top"><p><strong>Attribute</strong></p></td>
          <td width="293" valign="top"><p><strong>Format</strong></p></td>
          <td width="293" valign="top"><p><strong>Example</strong></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top"><p class="codeInline">leftMargin </p></td>
          <td width="293" valign="top" class="codeInline"><p>leftMargin=<span class="codeInline">'value 
              in pixels' </span></p></td>
          <td width="293" valign="top" class="codeInline"><p>leftMargin=<span class="codeInline">'10' 
              </span></p></td>
        </tr>
        <tr> 
          <td width="293" valign="top"><p class="codeInline">letterSpacing </p></td>
          <td width="293" valign="top" class="codeInline"><p>letterSpacing=<span class="codeInline">'value 
              in pixels' </span></p></td>
          <td width="293" valign="top" class="codeInline"><p>letterSpacing=<span class="codeInline">'3' 
              </span></p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td class="text"><p>The above style when applied to chart caption, gives the 
        following output:</p></td>
  </tr>
  <tr> 
    <td><table width="95%" border="0" cellspacing="0" cellpadding="2">
        <tr> 
          <td><img src="Images/Styles/style_2.jpg" width="348" height="102" class="imageBorder" /></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
